<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逛水果店</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #app {
            padding: 5.333333vw;
        }
        
        table {
            width: 53.333333vw;
        }
        
        table td {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">

        <p style="width: 53.333333vw; text-align: center;">欢饮光临_vue开发的收银系统_水果店</p>
        <table border="1">
            <tr>
                <th>苹果10¥/斤，折扣
                    <8折>
                </th>
            </tr>
            <tr>
                <td>
                    请输入你要购买的斤数<input style="padding-left: 0.266667vw;" v-model.number.trim="num">
                </td>
            </tr>
            <tr>
                <td>
                    <button @click="reckon">结账买单~</button>
                </td>
            </tr>
            <tr>
                <td>
                    结账单：总价 {{result}}¥元 折后价：{{discount}}¥元 省了：{{save}}¥元
                </td>
            </tr>
        </table>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                num: '',
                result: 0
            },
            methods: {
                reckon() {
                    if (typeof this.num !== "number") {
                        alert('请输入正确格式')
                        return
                    }
                    this.result = 10 * this.num
                }
            },
            computed: {
                discount() {
                    return this.result * 0.8
                },
                save() {
                    return this.result - this.discount
                }
            }
        })
    </script>
</body>

</html>